<template>
    <div class="wrapper" v-if="user">

      <div class="up-content" v-if="Object.keys(contents||[]).length>0">
                  <el-card shadow="hover" class="content-card">
                    <div class="part" v-for="(item, index) in contents" :key="index">
                      <h3>{{ item.title }}</h3>
                      <el-card shadow="hover" @click.native="handleUpClick(iten.type)" class="btn" :class="{respect:iten.disable}"
                        v-for="(iten, indey) in item.btns" :key="indey" :data-tracker="iten.type=='1'?'P65-3':'P65-4'">
                        <p>{{ iten.text }}</p>
                        <div class="item-discribtion">
                          <span>{{ iten.tip }}</span>
                          <span class="dis-right">{{ iten.disable?'敬请期待':'' }}</span>
                        </div>
                      </el-card>
                    </div>
                  </el-card>
      </div>
      <el-dialog title="" append-to-body :key="Math.random()" :visible.sync="dialogVisible" width="500px"
        :before-close="handleClose">
        <CompanyCustomer v-if="selectType === '1'" mode="add" :id="user.type_id" @ok="handleCustomerOk"
          @cancel="handleClose" />
        <Carrier v-else-if="selectType === '2'" mode="add" :id="user.type_id" :user="user" @ok="handleCarrierOk"
          @cancel="handleClose" />
      </el-dialog>
      <PasswordChange :visible="passwordFormVisible" @close="handlePassClose" :mobile="user.mobile"></PasswordChange>
      <RoleChange :dialogVisible="roleFormVisible" :user="user"  @close="handleRoleClose"></RoleChange>
    </div>
  </template>
  
  <script>
  import {
    getToken
  } from '@/utils/auth';
  import { uploading } from "@/page/material/common/common";
  import {
    INfOuserList, amendAvatar, amendUserInfo,AllInfo,ModifyPassword
  } from "@/api/user";
  import defaultAvatar from "@/assets/img/defaultAvatar.png";
  
  import { mobileCount } from '@/api/organization';
  import PersonCustomer from '@/page/infoManage/components/personCustomer.vue';
  
  import CompanyCustomer from '@/page/infoManage/components/companyCustomer.vue';
  import PasswordChange from '@/page/infoManage/components/passwordChange.vue';
  import RoleChange from '@/page/infoManage/components/roleChange.vue';
  import Staff from '@/page/infoManage/components/staff.vue';
  
  import Carrier from '@/page/infoManage/components/carrier';
  export default {
    name: 'userCenter',// 个人中心页面
    components: { PersonCustomer, CompanyCustomer, Carrier, PasswordChange,RoleChange ,Staff},
    props: [],
    data() {
      return {
        user: null,
        fileList: [],
        mode: 'detail',
        defaultAvatar: defaultAvatar,
        activeName: "0",
        dialogVisible: false,
        contents: [],
        companyCust: {
          title: '升级为公司客户',
          btns: [{
            type: '1',
            text: '我是公司客户',
            tip: '我以公司名义下单'
          }]
        },
        carrierCust: {
          title: '升级为承运商',
          btns: [{
            type: '2',
            text: '我要使用渡盟运输管理系统',
            tip: '我要承运物流运单'
          }, {
            type: '3',
            text: '我要成为渡石承运商',
            tip: '我有承运资质，我想承接渡石的运单',
            disable:true
          }]
        },
        carrierCust2: {
          title: '升级为渡石承运商',
          btns: [{
            type: '4',
            text: '我要成为渡石承运商',
            tip: '我有承运资质，我想承接渡石的运单',
            disable:true
          }]
        },
        accountType: '',
        typesData: ['个人客户', '公司客户', '承运商'],
        selectType: '',
        passwordFormVisible: false,
        roleFormVisible:false,
      };
    },
    computed: {
      isDS(){
        return   this.user.saas_company_id===1;
      }
    },
    mounted() {
      INfOuserList({ token: getToken('Token') }).then(res => {
        this.user = res.data;
        // type   身份类型：0员工1客户,2司机,3承运商，4系统对接
        // customer_type  0 公司客户 2个人客户
        const { type, customer_type } = this.user;
        if (type === 1 && customer_type === 2) {// 个人客户
          this.accountType = '0';
        } else if (type === 1 && customer_type === 0) {// 公司客户
          this.accountType = '1';
        } else if (type === 3) {// 承运商
          this.accountType = '2';
        } else if (type === 0) {// 员工
          this.accountType = '3';
        }
  
        if (this.accountType === '0') {
          this.contents = [this.companyCust, this.carrierCust];
        } else if (this.accountType === '1') {
          this.contents = [this.carrierCust];
        } else if (this.accountType === '2') {
          this.contents = [this.carrierCust2];
        } else if (this.accountType === '3') {//员工
          if(this.isDS){// 渡石
            this.contents = [];
          }else{
            this.contents = [this.carrierCust2];
          }
        } else {
          this.contents = [];
        }
  
      });
    },
    methods: {
      handleClick() {
  
      },
      handleModeChane(mode) {
        this.mode = mode;
      },
      handlePassUpdate() {
        this.passwordFormVisible = true;
      },
      handleClose() {
        this.dialogVisible = false;
      },
      handlePassClose() {
        this.passwordFormVisible = false;
      },
      handleRoleClose() {
        this.roleFormVisible = false;
        location.reload()
      },
      handleCustomerOk() {
        this.dialogVisible = false;
        location.reload();
      },
      handleCarrierOk() {
        this.dialogVisible = false;
        this.roleFormVisible=true
      },
      checkMobile(rule, val, cb) {
        mobileCount({ mobile: val, user_id: this.user.user_id }).then((res) => {
          if (res.data.count > 0) {
            cb(new Error("手机号已绑定"));
          } else {
            cb();
          }
        });
      },
      async handleChange(file, fileList) {
        var fileData = file.raw; //文件
        var filename = file.raw.uid + file.raw.name; //通过 uid和name组成文件的名字
        this.$confirm(`确定要修改头像吗？`).then(async res => {
          if (res) {
            const { res: result } = await uploading(fileData, filename, 12);
            this.user.profile_photo = result.requestUrls[0];
            const res1 = await amendAvatar({ profile_photo_url: this.user.profile_photo });
            if (res1.code === 10000) {
              this.$message({
                type: "success",
                message: "修改头像成功!",
              });
              // this.$router.go(0);
            }
          }
        });
  
      },
      handleSubmit() {
        this.$refs["user"].validate((valid) => {
          if (!valid) return;
          amendUserInfo({
            nickname: this.user.nickname,
            mobile: this.user.mobile
          }).then(res => {
            if (res.code === 10000) {
              this.$message({
                type: "success",
                message: "修改信息成功!",
              });
            }
          });
        });
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },
      handleUpClick(type) {
        this.selectType = type;
        this.dialogVisible = true;
      }
    },
  };
  </script>
  <style lang="scss" scoped>
  .wrapper {
    background: #fff;
    // padding: 10px;
    padding-left: 20px;
    height: 300px;
    box-sizing: border-box;
    padding-top:10px;
    .up-content {
        display: flex;
        width: 100%;
        .content-card {
          width: 380px;
          border-radius: 10px;
          // box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.4);
          border: 1px solid rgba(187, 187, 187, 1);
  
          /deep/.el-card__body,
          .el-main {
            padding:20px 20px;
          }
  
          .part {
            margin-bottom: 20px;
  
            h3 {
              color: rgba(78, 89, 105, 1);
              font-size: 22px;
              line-height: 36px;
              font-weight: bold;
            }
  
            .btn {
  
              margin-top: 10px;
              border-radius: 5px;
              padding-left: 5px;
              text-align: left;
              cursor: pointer;
              box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.4);
              border: 1px solid rgba(187, 187, 187, 1);
              &.respect{
                background-color: rgba(239, 239, 239, 1);
                pointer-events: none;
              }
              /deep/.el-card__body,
              .el-main {
                padding: 16px;
              }
  
              p {
                color: rgba(78, 89, 105, 1);
                font-size: 14px;
                line-height: 26px;
              }
  
              span {
                color: rgba(154, 154, 154, 1);
                font-size: 14px;
              }
              .item-discribtion{
                display: flex;
                justify-content: space-between;
                .dis-right{
                  color: rgba(22, 93, 255, 1);
                }
  
              }
            }
          }
  
        }
      }
  
    .form {
      width: 60%;
  
      .el-input {
        width: 200px;
      }
    }
  }
  </style>
  